<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view style="min-height: 100vh" class="bg-lightGray">
    <!--待办详情-->
    <u-navbar
      title="待办详情"
      leftIcon=""
      leftIconColor="#000000"
      bgColor="#efefef"
      :placeholder="true"
      :autoBack="false"
    >
      <view slot="left" @click="goBack"
        ><u-icon name="arrow-left" size="36" color="#000000"></u-icon
      ></view>
    </u-navbar>
    <view class="mx-4 mb-2.5">
      <view class="flex py-2.5 border-b-gray">
        <view class="text-lg text-dark font-semibold leading-8">{{
          detail.statusStr
        }}</view>
        <view
          class="ml-3"
          v-if="detail.createUserType == 'buy' && detail.status == 2"
        >
          <u-count-down
            :time="seconds"
            format="HH:mm:ss"
            autoStart
            @change="onChange"
            @finish="markStatus(2)"
          >
            <view class="text-xs leading-8">
              <!-- <text class="time__item">{{ timeData.days }}&nbsp;天</text> -->
              <text class="time__item"
                >{{
                  timeData.hours > 10 ? timeData.hours : '0' + timeData.hours
                }}&nbsp;时</text
              >
              <text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
              <text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
            </view>
          </u-count-down>
        </view>
      </view>
      <view class="border-b-gray pt-1.5 pb-2.5">
        <view
          class="text-xs leading-7"
          v-if="!(detail.type != 0 || detail.type != 1)"
          >{{
            detail.type == 0
              ? `投诉客服：${detail.serviceName}`
              : detail.type == 1
              ? `表扬客服：${detail.serviceName}`
              : detail.type == 2
              ? '提现'
              : detail.type == 3
              ? '收益'
              : detail.type == 4
              ? '邀请'
              : detail.type == 5
              ? '反馈建议'
              : '其他'
          }}</view
        >
        <view
          class="text-xs leading-4"
          v-if="detail.type == 0 || detail.type == 1"
          >客服印象：{{ detail.impression }}</view
        >
        <!-- <view class="text-xs leading-4"
          >处理方式：{{ detail.expectHandle }}</view
        > -->
        <view class="text-xs leading-4"
          ><text v-if="detail.type == 0 || detail.type == 1">对主管说：</text
          >{{ detail.content }}</view
        >
        <!--收益类型账单-->
        <view class="bg-white rounded-md py-2 my-2" v-if="detail.type == 3">
          <view class="flex justify-between mx-3">
            <view class="text-base text-dark leading-6 font-semibold">{{
              detail.billVos[0].type == 1 ? '提现' : '收益'
            }}</view>
            <view class="text-base text-dark leading-6 font-semibold"
              >{{ detail.billVos[0].type === 1 ? '-' : '+'
              }}{{ detail.billVos[0].amount }}</view
            >
          </view>
          <view class="flex justify-between mx-3">
            <view class="text-xs text-darkNormal leading-6">{{
              detail.billVos[0].createTime
            }}</view>
            <view class="text-xs text-darkNormal leading-6"
              ><text
                v-if="
                  detail.billVos[0].status == 0 && detail.billVos[0].type == 1
                "
                >处理中</text
              ><text
                v-else-if="
                  detail.billVos[0].status == 1 && detail.billVos[0].type == 1
                "
                >成功</text
              ><text
                v-else-if="
                  detail.billVos[0].status == 2 && detail.billVos[0].type == 1
                "
                >失败</text
              ><text v-else-if="detail.billVos[0].source == 1">商家</text
              ><text v-else-if="detail.billVos[0].source == 0"
                >服务商</text
              ></view
            >
          </view>
        </view>
        <!--收益类型账单-->
        <!--图片相册组件-->
        <view
          class="my-2.5 w-full"
          v-if="detail.mediaArray != null && detail.mediaArray.length > 0"
        >
          <u-album
            :urls="detail.mediaArray"
            keyName="url"
            multipleSize="200rpx"
            shape="circle"
            rowCount="3"
            space="20"
            class="diy-album"
          ></u-album>
        </view>
        <!--图片相册组件-->
      </view>
      <view class="rounded-md bg-white py-1.5 mt-2.5" v-if="detail.status != 3">
        <view class="ml-2.5 mr-3.5">
          <u-textarea
            v-model="content"
            placeholder="请输入内容..."
            border="none"
            placeholderStyle="color:#999999;font-size:24rpx"
            autoHeight
          ></u-textarea>
          <view class="flex justify-between items-end pb-1.5">
            <!--上传附件（图片/视频/文件）-->
            <view class="flex">
              <view class="ml-1.5" v-if="mediaVos.length > 0">
                <view
                  class="relative mr-2.5"
                  v-for="(item, index) in mediaVos"
                  :key="index"
                >
                  <image class="w-12 h-12 rounded-md" :src="item.src" />
                  <view
                    class="z-10 absolute -right-1 -top-1"
                    @click="mediaVosDel(item)"
                  >
                    <u-icon
                      name="minus-circle-fill"
                      color="#aaaaaa"
                      size="30rpx"
                    ></u-icon>
                  </view>
                  <view
                    class="bg-white w-2.5 h-1 absolute -right-1 top-0"
                  ></view>
                </view>
              </view>
              <view
                class="ml-1.5"
                v-if="mediaVos.length < 1"
                @click="uploadPhoto()"
              >
                <image
                  class="w-12 h-12"
                  src="/static/icons/icon-photo-add.png"
                />
              </view>
            </view>
            <view class="text-primary text-sm" @click="messageSubmit"
              >留言</view
            >
          </view>
        </view>
      </view>
      <view
        class="rounded-md bg-white py-2 mt-2.5"
        v-for="(item, index) in detail.history"
        :key="item.index"
      >
        <view class="mx-4">
          <view class="leading-5 text-xs"
            ><text class="text-dark mr-2.5">{{
              item.userType == 'buy' ? '我' : '客服'
            }}</text
            ><text class="text-light text-xs">{{ item.createTime }}</text></view
          >
          <view class="leading-5 text-xs text-dark">{{ item.content }}</view>
          <!--图片相册组件:留言 => 单图-->
          <view
            class="my-2.5 w-full h-28 overflow-y-hidden rounded-lg"
            v-if="item.mediaArray != null && item.mediaArray.length > 0"
          >
            <u-album
              :urls="item.mediaArray"
              keyName="url"
              singleSize="330"
              multipleSize="200rpx"
              shape="circle"
              rowCount="3"
              space="20"
            ></u-album>
          </view>
          <!--图片相册组件:留言 => 单图-->
        </view>
      </view>
    </view>
    <view class="h-20"></view>
    <!--状态操作：无需弹窗二次确认-->
    <view
      v-if="
        !(
          detail.createUserType == 'buy' &&
          (detail.type == 0 || detail.type == 1) &&
          detail.status == 3
        )
      "
    >
      <view
        class="fixed bottom-0 left-0 w-full border-t-gray bg-lightGray h-20"
        v-if="!(detail.createUserType == 'plt' && detail.status == 3)"
      >
        <view class="flex justify-between mx-4">
          <view
            class="text-sm mt-7"
            v-if="(detail.type == 0 || detail.type == 1) && detail.status == 2"
            >处理结果是否满意？</view
          >
          <view class="relative top-4" v-else>
            <view
              class="text-sm rounded-md h-10 leading-10 w-24 text-center"
              :class="isPress ? 'bg-primary' : 'bg-medium'"
              @click="toPress()"
              >催促提醒</view
            >
            <view class="w-24 text-center" v-if="timeCount > 0">
              <u-count-down
                :time="timeCount"
                format="mm:ss"
                autoStart
                @finish="(isPress = true), (timeCount = 0)"
              >
              </u-count-down>
            </view>
          </view>
          <view class="flex">
            <view
              class="text-sm border-common rounded-md py-2.5 px-4 mt-5 ml-3"
              v-if="detail.createUserType == 'plt' && detail.status != 3"
              @click="markStatus(3)"
              >标记已完成</view
            >
            <view
              class="text-sm border-common rounded-md py-2.5 px-4 mt-5 ml-3"
              v-if="
                detail.createUserType == 'buy' &&
                (detail.status == 0 || detail.status == 1)
              "
              @click="markStatus(3)"
              >{{
                detail.type == 0
                  ? '取消投诉'
                  : detail.type == 1
                  ? '取消表扬'
                  : '标记已完成'
              }}</view
            >
            <view
              class="flex"
              v-if="
                (detail.type == 0 || detail.type == 1) && detail.status == 2
              "
            >
              <view
                class="text-sm border-common rounded-md py-1.5 px-4 mt-5 ml-3"
                @click="markStatus(2)"
                >满意</view
              >
              <view
                class="text-sm border-common rounded-md py-1.5 px-4 mt-5 ml-3"
                @click="markStatus(1)"
                >不满意</view
              >
            </view>
            <view
              class="text-sm border-common rounded-md py-2.5 px-4 mt-5 ml-3"
              v-if="
                !(detail.type == 0 || detail.type == 1) &&
                detail.createUserType == 'buy' &&
                (detail.status == 2 || detail.status == 3)
              "
              @click="markStatus(1)"
              >标记未完成</view
            >
            <view
              class="text-sm border-common rounded-md py-2.5 px-4 mt-5 ml-3"
              v-if="
                (detail.type != 0 || detail.type != 1) &&
                detail.createUserType == 'buy' &&
                detail.status == 2
              "
              @click="markStatus(2)"
              >复核通过</view
            >
          </view>
        </view>
      </view>
    </view>

    <!--上传类型弹窗-->
    <u-popup :show="isShow" @close="isShow = false" mode="bottom" :round="80">
      <view class="pt-6 pb-16 mx-7">
        <view class="flex">
          <view class="w-1/3">
            <view class="bg-lightGray w-16 h-16 rounded-md flex justify-center">
              <u-icon
                name="/static/icons/icon-photo-upload.png"
                size="60rpx"
              ></u-icon>
            </view>
            <view class="text-center text-sm text-dark mt-2.5 w-16">相册</view>
          </view>
          <view class="w-1/3 flex justify-center">
            <view>
              <view
                class="bg-lightGray w-16 h-16 rounded-md flex justify-center"
              >
                <u-icon
                  name="/static/icons/icon-camera-upload.png"
                  size="60rpx"
                ></u-icon>
              </view>
              <view class="text-center text-sm text-dark mt-2.5 w-16"
                >拍摄</view
              >
            </view>
          </view>
          <view class="w-1/3 flex justify-end">
            <view>
              <view
                class="bg-lightGray w-16 h-16 rounded-md flex justify-center"
              >
                <u-icon
                  name="/static/icons/icon-file-upload.png"
                  size="60rpx"
                ></u-icon>
              </view>
              <view class="text-center text-sm text-dark mt-2.5 w-16"
                >文件</view
              >
            </view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import {
  getScheduleById,
  changeSchedule,
  wordSchedule,
} from '../../services/customer';
import { postFile } from '../../../services/file';

export default {
  data() {
    return {
      isPress: false,
      timeData: {},
      seconds: 600000,
      isShow: false,
      detail: {},
      content: '',
      mediaVos: [],
      timeCount: 0,
    };
  },
  async created() {
    this._getDetail();
  },
  methods: {
    //催促提醒
    toPress() {
      if (!this.isPress) {
        uni.$u.toast('客服正在加急处理中，请倒计时结束后再来催促呢~');
        return;
      }
      //刷新详情页面
      this._getDetail();
    },
    //返回待办列表页
    goBack() {
      uni.redirectTo({
        url: '/schedule-messages',
      });
    },
    //添加图片（目前只支持1张图片，只支持图片（大部分场景都是截图））
    uploadPhoto() {
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: async ({ tempFiles, tempFilePaths }) => {
          // #ifdef H5
          const file = tempFiles[0];
          // #endif
          // #ifndef H5
          const file = tempFilePaths[0];
          // #endif
          const { code, data } = await postFile(file, 'other');
          if (code != 200) return;
          let params = {
            type: 0,
            url: data.path,
            src: data.httpUrl,
          };
          this.mediaVos.push(params);
        },
      });
    },
    //移除已上传（预览）图片
    mediaVosDel(item) {
      let index = this.mediaVos.indexOf(item);
      if (index !== -1) {
        this.mediaVos.splice(index, 1);
      }
    },
    //倒计时
    onChange(e) {
      this.timeData = e;
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //人工客服详情
    async _getDetail() {
      const { id } = this.$Route.query;
      const { code, data } = await getScheduleById(id);
      if (code != 200) return;
      this.detail = data;
      if (data.status == 2) {
        this.seconds = parseInt(
          new Date(data.expireTime.replace(/-/g, '/')) -
            new Date(data.nowTime.replace(/-/g, '/'))
        );
      }
      //倒计时时间处理 => 前端写死即可
      this.timeCount = 180000;
      this.isPress = false;
    },
    //标记状态 => 1未完成  2复核通过  3已完成
    async markStatus(status) {
      const { code, data } = await changeSchedule({
        id: this.detail.id,
        userType: this.detail.userType,
        status: status,
      });
      if (code != 200) return;
      uni.$u.toast('操作成功');
      setTimeout(() => {
        this._getDetail();
      }, 500);
    },
    //留言提交
    async messageSubmit() {
      if (this.content == '') {
        uni.showToast({
          title: '请输入内容',
          icon: 'none',
        });
        return;
      }
      //判断是否有上传图片，有的话数据处理再提交
      let media = [];
      if (this.mediaVos.length > 0) {
        media = this.mediaVos.map((item) => {
          delete item.src;
          return item;
        });
      }
      //如果没有传输图片就不要给后台[] 即 没有 就不传输对象里的那个media属性
      let params = {
        workOrderId: this.detail.id,
        content: this.content,
      };
      if (media.length > 0) {
        params.media = media;
      }
      //console.log(params);
      const { code, data } = await wordSchedule(params);
      if (code != 200) return;
      uni.$u.toast('留言成功');
      this.content = '';
      this.mediaVos = [];
      setTimeout(() => {
        this._getDetail();
      }, 500);
    },
  },
};
</script>

<style>
page {
  background: #efefef;
}
</style>
<style lang="less" scoped>
/deep/ .uni-textarea-textarea {
  font-size: 24rpx;
}
/deep/ .u-album__row__wrapper > uni-image {
  border-radius: 18rpx;
}
</style>
